<template>
  <div class="heath">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>1</van-swipe-item>
      <van-swipe-item>2</van-swipe-item>
      <van-swipe-item>3</van-swipe-item>
      <van-swipe-item>4</van-swipe-item>
    </van-swipe>
    <div>
      <div class="lanmutitle">栏目推荐</div>
    </div>
    <div class="lanmu" align="center">
      <van-row type="flex" justify="space-around">
        <van-col span="8" v-for="(item,key) in lanmuList" :key="key" class="item">
          <div class="itemBorder">
            <van-image class="itemImg" :src="item.image" round width="4rem" height="4rem"/>
            <div class="title">{{item.title}}</div>
          </div>
        </van-col>
      </van-row>
    </div>
    <div class="line"></div>
     <div class="list-item" style="font-size: 14px;" v-for="(item,key) in list" :key="key">
      <div class="row gap-10px" style="height: 80px;">
        <div class="col" v-show="item.url">
          <van-image width="100" height="80" fit="contain" :src="item.url"/>
        </div>
          <div class="col" style="flex:1;margin-left: 10px;justify-content: space-between">
            <div class="van-multi-ellipsis--l2" style="font-size: 16px;padding-top: 5px">{{ item.title }}</div>
            <div class="row" style="align-items: center;justify-content: space-between">
              <span style="color: #d7d7d7">{{ item.date }}</span>
            </div>
          </div>
          <van-divider />
        </div>
      <van-divider/>
    </div>
    <div class="video">
      <div v-for="(item, key) in biglist" :key="key">
        <div style="padding: 10px 10px 10px 10px">{{item.title}}</div>
        <div class="bigImg">
          <img :src="item.img" alt="" srcset="">
        </div>
        <div style="padding: 5px 10px 5px 10px; font-size: 14px; color: #b6b6b6">{{item.date}}</div>
        <hr>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'health',
  data() {
    return {
      lanmuList: [
        {
          title: '入驻医院',
          image: 'https://img.yzcdn.cn/vant/cat.jpeg'
        },
         {
          title: '名家名医',
          image: 'https://img.yzcdn.cn/vant/cat.jpeg'
        },
         {
          title: '本地健康资讯',
          image: 'https://img.yzcdn.cn/vant/cat.jpeg'
        },
         {
          title: '光明医院',
          image: 'https://img.yzcdn.cn/vant/cat.jpeg'
        },
         {
          title: '人民医院',
          image: 'https://img.yzcdn.cn/vant/cat.jpeg'
        },
         {
          title: '中医医院',
          image: 'https://img.yzcdn.cn/vant/cat.jpeg'
        }
      ],
       list: [
        {
          author: '市金融局',
          title: '玉马遮阳首发上市经深交所创业板上市委员会审议会议通过',
          url: 'https://img.yzcdn.cn/vant/cat.jpeg',
          date: '11-09 08:34',
        },
        {
          author: '市行政审批服务局',
          title: '关于设立寿光市润通医药有限公司古城街道寿济路诊所的公示',
          url: 'https://img.yzcdn.cn/vant/cat.jpeg',
          date: '11-18 10:34',
        },
      ],
      biglist: [
        {
          title: '寻医问药 种植牙是长出来的吗?',
          img: require('@/assets/bigImg.png'),
          date: '11-18 10:35'
        },
        {
          title: '寻医问药 种植牙是长出来的吗?',
          img: require('@/assets/bigImg.png'),
          date: '11-18 10:35'
        }
      ]
    }
  }
};
</script>

<style lang="scss" scoped>
   .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
  .item {
    padding-top: 10px;
    padding-bottom: 15px;
  }
  .itemBorder {
    height: 120px;
    margin-left: 10px;
    margin-right: 10px;
    -moz-box-shadow:2px 2px 10px rgb(220, 221, 221);
    -webkit-box-shadow:2px 2px 10px rgb(220, 221, 221);
    box-shadow:2px 2px 10px rgb(220, 221, 221);
  }
  .title {
  padding-top: 10px;
  text-align: center;
  }
  .itemImg {
    padding-top: 10px;
  }
  .lanmutitle {
    font-size: 20px;
    font-weight: bolder;
    padding: 15px 0 5px 15px;
  }
  .line {
   height:10px; 
   background-color:#eef0ef;
   margin-top: 20px;
   margin-bottom: 20px;
  }
  .col {
    display: flex;
    flex-direction: column;
  }
  .row {
    padding-left: 10px;
    display: flex;
    flex-direction: row;
  }
  .bigImg {
    padding:5px 10px 5px 10px;
  }
  .bigImg img{
    width: 100%;
  }
</style>
